<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <currency-input label="Price" v-model="price"></currency-input>
        <currency-input label="Shipping" v-model="shipping"></currency-input>
        <currency-input label="Handling" v-model="handling"></currency-input>
        <currency-input label="Discount" v-model="discount"></currency-input>

        <p>Total: ${{ total }}</p>
    </div>
    <script src="../js/vue.js" charset="utf-8"></script>
    <script src="https://cdn.rawgit.com/chrisvfritz/5f0a639590d6e648933416f90ba7ae4e/raw/98739fb8ac6779cb2da11aaa9ab6032e52f3be00/currency-validator.js" charset="utf-8"></script>
    <script type="text/javascript">
    Vue.component('currency-input', {
        template: '\
        <div>\
        <label v-if="label">{{ label }}</label>\
        $\
        <input\
        ref="input"\
        v-on:input="updateValue($event.target.value)"\
        v-on:focus="selectAll"\
        v-on:blur="formatValue"\
        >\
        </div>\
        ',
        props: {
            value: {
                type: Number,
                default: 0
            },
            label: {
                type: String,
                default: ''
            }
        },
        mounted: function () {
            this.formatValue()
        },
        methods: {
            updateValue: function (value) {
                var result = currencyValidator.parse(value, this.value)
                if (result.warning) {
                    this.$refs.input.value = result.value
                }
                this.$emit('input', result.value)
            },
            formatValue: function () {
                this.$refs.input.value = currencyValidator.format(this.value)
            },
            selectAll: function (event) {
                // Workaround for Safari bug
                // http://stackoverflow.com/questions/1269722/selecting-text-on-focus-using-jquery-not-working-in-safari-and-chrome
                setTimeout(function () {
                    event.target.select()
                }, 0)
            }
        }
    })

    new Vue({
        el: '#app',
        data: {
            price: 0,
            shipping: 0,
            handling: 0,
            discount: 0
        },
        computed: {
            total: function () {
                return ((
                    this.price * 100 +
                    this.shipping * 100 +
                    this.handling * 100 -
                    this.discount * 100
                ) / 100).toFixed(2)
            }
        }
    })

    </script>
</body>
</html>
